<template>
  <el-autocomplete
    style="width: 100%"
    placeholder="请输入品牌名称"
    v-model="selectVal"
    :fetch-suggestions="queryUserDataAction"
    @select="handleSelect"
    :trigger-on-focus="false"
    clearable
  ></el-autocomplete>
</template>
<script>
import { ApiRequest } from '@api/basePage';
export default {
  name: 'BrandNameSelect',
  data () {
    return {
      loading: false,
      selectVal: '',
      dataSource: [],
      request: {
        url: '/sysback/productbrand/productbrand/baseQueryList', // 接口地址
        type: 'post' // 接口请求类型
      },
    };
  },
  methods: {
    handleSelect ({ value }) {
      // 值回显父组件
      this.$emit('input', value);
      // change事件
      this.$emit('change', value);
    },
    async queryUserDataAction (queryString = '', cb) {
      this.handleSelect({ value: queryString })
      if (!queryString) {
        return
      }
      this.loading = true;
      let dataSource = []
      const { retData, retStatus } = await ApiRequest(
        this.request.url,
        this.request.type,
        { nowPage: 1,
          pageShow: 20,
          searchParam: JSON.stringify([
            { name: 'brandName', value: queryString },
            { name: 'brandState', value: '1' },
            { name: 'brandName_q', value: 'Like' },
            { name: 'brandState_q', value: 'Like' },
          ])
        }
      );
      if (retStatus === '1' && retData.results && retData.results.length) {
        dataSource = retData.results.map(item => {
          return { value: item.brandName }
        })
        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          cb(dataSource);
        }, 3000 * Math.random());
      }
      cb(dataSource)
      this.loading = false;
    },
    resetSelectVal () {
      console.log('resetSelectVal')
      this.selectVal = ''
    }
  }
};
</script>
